<template>
<div id="app" class='tmpl'>
    <!--1项目顶部-->
    <mt-header fixed title="vue-demo"></mt-header>
    <div v-if="isshow" id="back" @click="backTo()">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    </div>
    <router-view></router-view>
    <div class="footer">
        <nav class="mui-bar mui-bar-tab">

            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/tabbar-with-chat">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">会员</span>
            </router-link>
            <router-link class="mui-tab-item" to="/shopcar/car">
                <span class="mui-icon mui-icon-contact">
                     <span id='getcount' class="mui-badge">0</span></span>
                <span class="mui-tab-label">购物车</span>
            </router-link>
            <router-link class="mui-tab-item" to="/tabbar-with-map">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </router-link>
        </nav>
    </div>
</div>
</template>

<script>
import {
    Toast
} from 'mint-ui';
import {
    vm,
    COUNTNUB
} from './kits/vm.js'
//    注册COUNTNUB常量带表的事件

vm.$on(COUNTNUB, function(count) {
    var getcount = document.querySelector('#getcount');
    getcount.innerHTML = parseInt(getcount.innerHTML) + count;
})
export default {
    //        name: 'app',
    data() {
        return {
            isshow: false
        }
    },
    watch: {
        '$route': function(newroute, oldroute) {
            if (newroute.path.toLowerCase() == '/home') {
                this.isshow = false;
            } else {
                this.isshow = true;
            }
        }
    },

    methods: {
        backTo() {
            //				利用路由对象中的go(-1)来实现返回到上一级页面(这个方法是vue-router的方法)
            this.$router.go(-1);
        }
    }

}
</script>

<style scoped>
/*当前页面的css样式写到这里，其中scoped表示这个里面写的css代码只是在当前组件页面上有效，不会去影响到其他组件页面*/

#back {
    width: 60px;
    height: 40px;
    position: fixed;
    top: 0;
    left: 10px;
    z-index: 101;
}

#back a {
    color: white;
    font-size: 24px;
    font-weight: bold;
    line-height: 40px;
}
</style>
